/* Applies changes to the "body" of the HTML Document. Adding a minimum text height and a radial gradient background */
/* "Blank Website" Stylesheet  titled "inverted style.css" */
body 
{
    text-align: left;
    min-height: 200vh;
    min-width: 200px;
    background-color: #fff;
    /* Sets the text color black*/
    color: #000000;
}
/* Modifies and orients the primary section and sections that fall under the 1 and 2 class ID*/
section
{
    text-align: left;
    font-family: "Gill Sans Extrabold", sans-serif;
    font-size: 1.5em;
}
#Section1 
{
    text-align: left;
    max-width: 1080px;
    position: relative;
    padding: 50px 20px; /* Adjust padding for proper spacing */
    bottom: 0;
    background-color: white;
    width: 100%; /* Adjust width to take full width */
}
#Section2
{
    text-align: left;
    max-height: 500px; 
    max-width: 1080px;
    position: relative;
    padding: 50px 20px;
    background-color: white;
}
/* Creates a stylized "box" for an outer container*/
.inverted-outer-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, #dd9db4, #64c48b);
}
/* Creates a stylized "box" for an inner container*/
.inverted-inner-container {
  width: 80%;
  padding: 20px;
  background: linear-gradient(to bottom right, #dd9db4, #64c48b);
  border: 2px solid #000000;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  text-align: center;
}
/* Fills the inner box with text */
.inverted-inner-container h1 {
  font-size: 24px;
  color: #000000;
  text-transform: uppercase;
}

/* Creates a class for images*/
.inverted-imageClass {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; 
}
/* Scales HTML images with the source tag <img>*/
.image {
    max-width: 400px;
    max-height: 600px;
    width: auto;
    height: auto;
}
/* Brand new rotated text little tool */
#inverted-rotated-text {
   transform: rotate(90deg);
   writing-mode: vertical-rl; /* vertical right-to-left writing mode */
   font-family: "Times New Roman", Times, serif;
}

#inverted-rotated-text p {
    max-width: 80%; /* Set a maximum width for the paragraphs */
}

#inverted-rotated-text img {
    max-height: 400px; /* Set a maximum height for the rotated image */
}

/********************************************************/
/* Maintains the black text for links */
a {
    color: black;
    text-decoration: none; /* Remove underline */
}

a:hover {
    color: black; /* Maintain black color on hover */
}
/********************************************************/